<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

    <script type="text/javascript">
        const siteUrl = "./",
            musicMp3 = "bgm.mp3"
    </script>

    <link rel="stylesheet" type="text/css" href="css/music.css"/>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <title>大华银行（中国）中山分行开业有礼</title>
</head>

<body>

    <div class="pop-bg-share">
        <img src="images/share_img.png" width="100%" alt="" />
    </div>

    <div class="pop-bg">
        <div class="pop-box" id="warning">
            <div class="pop-box-title">提示</div>
            <div class="pop-box-content warning">
                <p>您的游戏机会已用完！</p>
                <p>分享给好友即可获得游戏机会，</p>
                <p>快去分享给好友吧~</p>
            </div>
            <button class="share-btn warning">分享好友</button>
        </div>

        <div class="pop-box" id="congratulations">
            <div class="pop-box-title">恭喜过关</div>
            <div class="pop-box-content warning">
                <p>恭喜您本次成功过关，</p>
                <p>继续挑战，</p>
                <p>冲榜拿丰厚“最具眼力”大奖哦</p>
                <p><br /></p>
                <p class="red">邀请好友最多用户TOP6，</p>
                <p class="red">还可拿更多奖品，加油鸭~</p>
            </div>
            <div class=""></div>
            <button class="close-pop warning">关闭</button>
        </div>

        <div class="pop-box" id="gameInto">
            <div class="pop-box-title">玩法提示</div>
            <img class="game-into" src="images/game_into_img.png" alt="" />
            <img class="game-point" src="images/point_icon.png" alt="" />
            <div class="pop-box-content">
                <p>在洗牌打乱之后，</p>
                <p>需在7张财神牌当中</p>
                <p><span>找出中山分行的财神牌</span></p>
            </div>
            <button id="gameStart">开始游戏</button>
        </div>

        <div class="pop-box card" id="success">
            <div class="pop-success-box">中山分行</div>
            <div class="pop-card-success-text">恭喜您，眼力不错哦~</div>
        </div>

        <div class="pop-box card" id="failed">
            <img class="share-btn" src="images/share_btn.png" alt="">
            <div class="pop-failed-box">大华银行（香港）<br />尖沙咀商业银行理财中心</div>
            <div class="pop-failed-bank-box">
                <p><span>电　　话：</span>(852) 3970 7700 / 3970 7702</p>
                <p><span>业务范围：</span>对公业务</p>
                <p><span>地　　址：</span>香港九龙尖沙咀海港城港威大厦第6座21楼2110－13室</p>
            </div>
            <div class="pop-card-failed-text">很遗憾！眼力有待提高，再接再厉哦~</div>
            <div class="pop-btns-box">
                <img class="rank-btn" src="images/pop_rank_btn.png" alt="" />
                <img class="again-btn" src="images/pop_again_btn.png" alt="" />
            </div>
        </div>

        <div class="pop-box card" id="failed1">
            <img class="share-btn" src="images/share_btn.png" alt="">
            <div class="pop-failed-box">手慢了！</div>
            <img class="failed-icon" src="images/failed_icon.png" alt="">
            <div class="pop-card-failed-text">很遗憾！眼力有待提高，再接再厉哦~</div>
            <div class="pop-btns-box">
                <img class="rank-btn" src="images/pop_rank_btn.png" alt="" />
                <img class="again-btn" src="images/pop_again_btn.png" alt="" />
            </div>
        </div>

        <div class="pop-box redbag" id="redbag">
            <img src="images/pop_redbag_title.png" width="100%" alt="" />
            <!--<img class="pop-redbag-text" src="images/pop_redbag_text.png" width="100%" alt="" />-->
            <img class="pop-redbag-text" src="images/pop_redbag_text_share.png" width="100%" alt="" />
            <!--<img class="pop-redbag-btn" src="images/pop_redbag_btn.png" width="100%" alt="" />-->
            <img class="pop-redbag-btn" src="images/pop_redbag_btn_share.png" width="100%" alt="" />
            <div class="pop-btns-box">
                <img class="rank-btn" src="images/pop_rank_btn.png" alt="" />
                <img class="again-btn" src="images/pop_again_btn.png" alt="" />
            </div>
        </div>
        <img class="rule-btn pop" id="popRuleBtn" src="images/rule_btn.png" alt="" />
    </div>

    <div class="page index" style="display: block;">
        <div class="lion-box">
            <!--<div class="lion-mouth">-->
                <!--<img class="index-text-one" src="images/index_text_one.png" alt="" />-->
                <!--<img class="index-text-two" src="images/index_text_two.png" alt="" />-->
            <!--</div>-->
            <!--<img class="lion-head" src="images/lion_head.gif" width="100%" alt="" />-->
            <img src="images/lion_head.jpg" width="100%" alt="" />
            <img src="images/lion_mouth.png" width="100%" alt="" />
            <div class="lion-tongue">
                <img class="index-text-one" src="images/index_text_one.png" alt="" />
                <img class="index-text-two" src="images/index_text_two.png" alt="" />
                <img class="scroll" src="images/scroll_img.png" alt="" />
            </div>
            <img class="left-eye" src="images/lion_eyes_left.png" alt="" />
            <img class="right-eye" src="images/lion_eyes_right.png" alt="" />
            <div class="lion-text-box">
                <p>玩游戏，赢好礼！</p>
            </div>
            <img class="rank-btn" src="images/rank_btn.png" alt="" />
            <img class="rule-btn" src="images/rule_btn.png" alt="" />
            <button class="index" id="start">开始游戏</button>
        </div>
        <img class="bottom" src="images/bottom_img.png" alt="" />
    </div>

    <div class="page game">
        <img class="level-box" src="images/level_show_box_one.png" alt="" />
        <div class="box">
            <div class="box-item hongkang">
                <div class="item-back"></div>
                <div class="item-front"></div>
            </div>
            <div class="box-item tongluowan">
                <div class="item-back"></div>
                <div class="item-front"></div>
            </div>
            <div class="box-item jianshazui">
                <div class="item-back"></div>
                <div class="item-front"></div>
            </div>
            <div class="box-item guangzhou">
                <div class="item-back"></div>
                <div class="item-front"></div>
            </div>
            <div class="box-item zhongshan">
                <div class="item-back"></div>
                <div class="item-front"></div>
            </div>
            <div class="box-item guantang">
                <div class="item-back"></div>
                <div class="item-front"></div>
            </div>
            <div class="box-item shenzhen">
                <div class="item-back"></div>
                <div class="item-front"></div>
            </div>
        </div>
        <div class="start-text-box">
            <h1>第一关</h1>
            <p>看准中山分行<br />财神牌的位置哦~</p>
            <div class="start-time-box">3</div>
        </div>
        <div class="choose-answer-box">
            <div class="choose-time-box">
                <div><span>6</span>'s</div>
                <p>倒计时</p>
            </div>
            <p>选出中山分行<br/>财神牌的位置</p>
            <p>马上享大礼</p>
        </div>
        <div class="game-info">大华银行于粤港澳大湾区的分支机构</div>
        <img class="bottom" src="images/game_bottom.png" alt="" />
    </div>

    <div class="page rule" id="rule">
        <img src="images/tree_img.png" width="100%" alt="" />
        <img class="title" src="images/rule_title.png" width="100%" alt="" />
        <div class="content-box">
            <div>
                <p><span>1．</span>活动名称：大华银行中山分行开业有礼 （以下简称为“本活动”）；</p>
                <p><span>2．</span>在参加本活动之前，参与者已认真阅读本活动的相关条款及条件，本活动由大华银行（中国）有限公司（以下简称为"主办方"）主办，参与者一旦参与本活动即表示同意并完全理解关于本活动的一切规则和条件；</p>
                <p><span>3．</span>参与者需要关注&lt;大华银行中国&gt;微信公众号。活动期间，参与者参与本活动，在粤港澳大湾区7个分行财神牌当中，找出这张中山财神牌，若找到则过关，一共设3关，每关洗牌速度越来越快，系统会随机改变中山分行的位置，通关成功可获得1次抽红包的机会。</p>
                <p><span>4．</span>每位用户只有1次获得红包的机会。活动期间，主办方限量发放3万个红包，先得先得，发完即止；</p>
                <p><span>5．</span>本活动设置“最具眼力榜TOP6（即找中山财神牌用时最短用户TOP6）”和“邀请好友榜TOP6（即邀请好友最多用户TOP6）”，可获得额外大奖。一等奖x1（500元京东购物卡）、二等奖x 2（200元星巴克礼品券）、三等奖x 3（100元星巴克礼品券）。活动结束后， &lt;大华银行中国&gt;微信公众号将发布“最具眼力榜TOP6”以及“人见人爱榜TOP6”榜单。用户需在规定时间内回复领奖信息，逾期则视为自动放弃；</p>
                <p><span>6．</span>每人每日3次参赛次数，每分享给1个好友可获得再玩1次的机会，参赛次数不设上限；</p>
                <p><span>7. </span>在法律允许范围内，大华银行保留随时调整本活动之优惠、暂停或提前终止本活动或修改本活动规则之权益。</p>
            </div>
            <button class="back">返回</button>
        </div>
        <img class="bottom-cloud" src="images/bottom_cloud.png" width="100%" alt="" />
    </div>

    <div class="page rank" id="rank">
        <img src="images/tree_img.png" width="100%" alt="" />
        <img class="title" src="images/rank_title.png" width="100%" alt="" />
        <div class="content-box rank">
            <div class="list-choose-box">
                <div class="list-choose-item onthis">最具眼力榜TOP6</div>
                <div class="list-choose-item">人见人爱榜TOP6</div>
            </div>
            <div class="rank-list-box">
                <div class="rank-list-cont">
                    <div class="rank-list-item">
                        <div class="rank-list-num"><img src="images/rank_first_icon.png" width="100%" alt="" /></div>
                        <div class="rank-list-user"><img src="images/user_demo.png" width="100%" alt="" /></div>
                        <div class="rank-list-name">
                            <h1>美少女</h1>
                            <p>获得奖品XXXXX</p>
                        </div>
                        <div class="rank-list-time">挑战时间：<span>2.687’s</span></div>
                    </div>
                    <div class="rank-list-item">
                        <div class="rank-list-num"><img src="images/rank_secend_icon.png" width="100%" alt="" /></div>
                        <div class="rank-list-user"><img src="images/user_demo.png" width="100%" alt="" /></div>
                        <div class="rank-list-name">
                            <h1>美少女</h1>
                            <p>获得奖品XXXXX</p>
                        </div>
                        <div class="rank-list-time">挑战时间：<span>2.687’s</span></div>
                    </div>
                    <div class="rank-list-item">
                        <div class="rank-list-num"><img src="images/rank_third_icon.png" width="100%" alt="" /></div>
                        <div class="rank-list-user"><img src="images/user_demo.png" width="100%" alt="" /></div>
                        <div class="rank-list-name">
                            <h1>美少女</h1>
                            <p>获得奖品XXXXX</p>
                        </div>
                        <div class="rank-list-time">挑战时间：<span>2.687’s</span></div>
                    </div>
                    <div class="rank-list-item">
                        <div class="rank-list-num">4</div>
                        <div class="rank-list-user"><img src="images/user_demo.png" width="100%" alt="" /></div>
                        <div class="rank-list-name">
                            <h1>美少女</h1>
                            <p>获得奖品XXXXX</p>
                        </div>
                        <div class="rank-list-time">挑战时间：<span>2.687’s</span></div>
                    </div>
                    <div class="rank-list-item">
                        <div class="rank-list-num">5</div>
                        <div class="rank-list-user"><img src="images/user_demo.png" width="100%" alt="" /></div>
                        <div class="rank-list-name">
                            <h1>美少女</h1>
                            <p>获得奖品XXXXX</p>
                        </div>
                        <div class="rank-list-time">挑战时间：<span>2.687’s</span></div>
                    </div>
                    <div class="rank-list-item">
                        <div class="rank-list-num">6</div>
                        <div class="rank-list-user"><img src="images/user_demo.png" width="100%" alt="" /></div>
                        <div class="rank-list-name">
                            <h1>美少女</h1>
                            <p>获得奖品XXXXX</p>
                        </div>
                        <div class="rank-list-time">挑战时间：<span>2.687’s</span></div>
                    </div>
                </div>
                <div class="rank-list-item my">
                    <div class="rank-list-num"><img src="images/rank_first_icon.png" width="100%" alt="" /></div>
                    <div class="rank-list-user"><img src="images/user_demo.png" width="100%" alt="" /></div>
                    <div class="rank-list-name">
                        <h1>美少女</h1>
                        <p>获得奖品XXXXX</p>
                    </div>
                    <div class="rank-list-time">挑战时间：<span>2.687’s</span></div>
                </div>
                <div class="rank-tips-box">挑战时间相同的玩家，最先达到此成绩的排名优先</div>
            </div>
            <button class="back rank">返回</button>
        </div>
        <img class="bottom-cloud" src="images/bottom_cloud.png" width="100%" alt="" />
    </div>


    <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/music.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function (e) {
            $('.close-pop').click(function (e) {
                $('.pop-bg').removeClass('show');
                $('.pop-box').hide();
            });

            $('.pop-bg-share').click(function (e) {
                $('.pop-bg-share').hide();
            });
            
            $('.share-btn').click(function (e) {
                $('.pop-bg-share').show();
            });

            $('.back').click(function (e) {
                $('#rule').hide();
                $('#rank').hide();
            });

            $('.rank-btn').click(function (e) {
                $('#rank').show();
            });

            $('.rule-btn').click(function (e) {
                $('#rule').show();
            });

            $('.again-btn').click(function (e) {
                againGame();
            });

            $('#gameStart').click(function (e) {
                $('.pop-bg').removeClass('show');
                $('#gameInto').hide();
                gameStartTimerRound();
            });

            $('#start').click(function (e) {
                $('.index').hide();
                $('.game').show();
                $('.pop-bg').addClass('show');
                $('#gameInto').show();
                $('#musicMenu').show();
            });

            // 变换速度
            let speed = 500;
            // 变换频率
            let pl = 300;
            // 变换次数
            let times = 5;
            let arr = $('.box-item');
            let gameStartNum = 3;
            let gameStartTimer;
            let gameChooseNum = 6;
            let gameChooseTimer;
            let gameLevelNum = 1;
            let startTime;
            let overTime;
            let processTime;
            let resultNum = 0;

            function init(){
                gameStartNum = 3;
                gameChooseNum = 6;
                gameLevelNum = 1;
                $('.box-item').removeAttr('style');
            }

            function gameStartFun() {
                for (var i=0;i<7;i++){
                    flip($('.box-item').eq(i),'back');
                }
                setTimeout(function (e) {
                    let resetInt = setInterval(resetItem,pl);
                    setTimeout(function (e) {
                        clearInterval(resetInt);
                        gameChooseTimerRound();
                    },speed*times);
                },1000);
            }

            function gameStartTimerRound() {
                $('.zhongshan').addClass('toBig');
                $('.zhongshan').removeClass('backSmall');
                gameStartTimer = setInterval(function (e) {
                    gameStartNum --;
                    $('.start-time-box').text(gameStartNum);
                    if (gameStartNum <= 0){
                        clearInterval(gameStartTimer);
                        $('.zhongshan').removeClass('toBig');
                        $('.zhongshan').addClass('backSmall');
                        $('.start-text-box').fadeOut();
                        gameStartFun();
                    }
                },1000);
            }
            
            function gameChooseTimerRound() {
                startTime = +new Date();
                console.log('开始时间:'+startTime);
                $('.box-item').bind('touchend',itemClick);
                $('.choose-answer-box').fadeIn();
                gameChooseTimer = setInterval(function (e) {
                    gameChooseNum --;
                    $('.choose-time-box').find('span').text(gameChooseNum);
                    if (gameChooseNum <= 0){
                        clearInterval(gameChooseTimer);
                        $('.box-item').unbind('touchend');
                        overTime = +new Date();
                        console.log('结束时间:'+overTime);
                        processTime = overTime - startTime;
                        console.log('过程时间:'+processTime);
                        resultNum = 0;
                        console.log('结果参数：'+ resultNum);
                        for (var i=0;i<7;i++){
                            flip($('.box-item').eq(i),'front');
                        }
                        setTimeout(function () {
                            $('.pop-bg').addClass('show');
                            $('#failed1').show();
                            $('#popRuleBtn').show();
                        },500);
                    }
                },1000);
            }

            function againGame() {
                switch (gameLevelNum) {
                    case 1:
                        $('.pop-card-success-text').text('恭喜您，眼力不错哦~');
                        gameStartNum = 3;
                        gameChooseNum = 6;
                        speed = 500;
                        pl = 300;
                        times = 5;
                        $('.level-box').attr('src','images/level_show_box_one.png');
                        $('.start-text-box').find('h1').text('第一关');
                        break;
                    case 2:
                        $('.pop-card-success-text').text('眼力逆天了，继续加油鸭！');
                        gameStartNum = 3;
                        gameChooseNum = 4;
                        speed = 300;
                        pl = 200;
                        times = 7;
                        $('.level-box').attr('src','images/level_show_box_two.png');
                        $('.start-text-box').find('h1').text('第二关');
                        break;
                    case 3:
                        gameStartNum = 3;
                        gameChooseNum = 3;
                        speed = 200;
                        pl = 100;
                        times = 10;
                        $('.level-box').attr('src','images/level_show_box_three.png');
                        $('.start-text-box').find('h1').text('第三关');
                        break;
                }
                $('.start-time-box').text(gameStartNum);
                $('.choose-time-box').find('span').text(gameChooseNum);
                $('.pop-bg').removeClass('show');
                $('.pop-box').hide();
                $('.box-item').removeClass('open');
                $('.choose-answer-box').fadeOut();
                $('.start-text-box').fadeIn();
                gameStartTimerRound();
            }
            
            function showRedbag() {
                gameLevelNum = 1;
                init();
                $('.pop-box').hide();
                $('#redbag').show();
                $('#popRuleBtn').show();
            }

            function showGameResultShow(res) {
                if (res == 'win'){
                    setTimeout(function () {
                        $('.pop-bg').addClass('show');
                        $('#success').show();
                        gameLevelNum ++;
                        if (gameLevelNum > 3){
                            setTimeout(showRedbag,2000);
                        }else {
                            setTimeout(againGame,2000);
                        }
                    },500);
                }else{
                    setTimeout(function () {
                        $('.pop-bg').addClass('show');
                        $('#failed').show();
                        $('#popRuleBtn').show();
                    },500);
                }
            }

            function itemClick(e) {
                $('.box-item').unbind('touchend');
                let obj = $(e.currentTarget);
                overTime = +new Date();
                console.log('结束时间:'+overTime);
                processTime = overTime - startTime;
                console.log('过程时间:'+processTime);
                obj.addClass('open');
                for (var i=0;i<7;i++){
                    flip($('.box-item').eq(i),'front');
                }
                $('.box-item').unbind('touchend');
                clearInterval(gameChooseTimer);
                if($(this).hasClass('zhongshan')){
                    showGameResultShow('win');
                    resultNum = 1;
                    console.log('结果参数：'+ resultNum);
                }else{
                    if ($(this).hasClass('hongkang')) {
                        resultNum = 2;
                        console.log('结果参数：'+ resultNum + '-香港');
                    }else if ($(this).hasClass('tongluowan')){
                        resultNum = 3;
                        console.log('结果参数：'+ resultNum + '-铜锣湾');
                    }else if ($(this).hasClass('jianshazui')){
                        resultNum = 4;
                        console.log('结果参数：'+ resultNum + '-尖沙咀');
                    }else if ($(this).hasClass('guangzhou')){
                        resultNum = 5;
                        console.log('结果参数：'+ resultNum + '-广州');
                    }else if ($(this).hasClass('guantang')){
                        resultNum = 6;
                        console.log('结果参数：'+ resultNum + '-观塘');
                    }else if ($(this).hasClass('shenzhen')){
                        resultNum = 7;
                        console.log('结果参数：'+ resultNum + '-深圳');
                    }
                    showGameResultShow('lose');
                }
            }

            function flip(obj,to){
                obj.addClass('an');
                if (to == 'back'){
                    setTimeout(function (e) {
                        obj.find('.item-back').show();
                        obj.find('.item-front').removeClass('show');
                        setTimeout(function (e) {
                            obj.removeClass('an');
                        },250);
                    },250);
                }else {
                    setTimeout(function (e) {
                        obj.find('.item-back').hide();
                        obj.find('.item-front').addClass('show');
                        setTimeout(function (e) {
                            obj.removeClass('an');
                        },250);
                    },250);
                }
            }

            function resetItem() {
                let randomOne = Math.floor(Math.random()*arr.length);
                let objOne = arr.splice(randomOne,1);
                let randomTwo = Math.floor(Math.random()*arr.length);
                let objTwo = arr.splice(randomTwo,1);
                let objOneX = $(objOne).offset().left;
                let objOneY = $(objOne).offset().top;
                let objTwoX = $(objTwo).offset().left;
                let objTwoY = $(objTwo).offset().top;
                $(objOne).animate({
                    left: objTwoX+'px',
                    top: objTwoY+'px'
                },speed,'linear',function (e) {
                    arr.push(objOne[0]);
                });
                $(objTwo).animate({
                    left: objOneX+'px',
                    top: objOneY+'px'
                },speed,'linear',function (e) {
                    arr.push(objTwo[0]);
                });
            }
        });
    </script>
</body>
</html>